<template>
    <div class="advColumn">
        <div class="advLeft">
            <cube-slide class="limitAdv" :data="adv.left" :interval="10000" :showDots="false">
                <cube-slide-item v-for="item in adv.left" :key="item.id" @click.native="turn(item.linkId)">
                        <img :src="imgH+item.img">
                </cube-slide-item>
            </cube-slide>
        </div>
        <div class="advRight">
            <div class="advTop">
                <cube-slide class="chooseAdv" :data="adv.rightTop" :interval="9000" :showDots="false">
                    <cube-slide-item v-for="item in adv.rightTop" :key="item.id" @click.native="turn(item.linkId)">
                        <img :src="imgH+item.img">
                    </cube-slide-item>
                </cube-slide>
            </div>
            <div class="advBottom">
                <cube-slide class="advBot daily" :data="adv.buttonLeft" :interval="8000" :showDots="false">
                    <cube-slide-item v-for="item in adv.buttonLeft" :key="item.id" @click.native="turn(item.linkId)">
                        <img :src="imgH+item.img">
                    </cube-slide-item>
                </cube-slide>
                <cube-slide class="advBot daily" :data="adv.buttonRight" :interval="7000" :showDots="false">
                    <cube-slide-item v-for="item in adv.buttonRight" :key="item.id" @click.native="turn(item.linkId)">
                        <img :src="imgH+item.img">
                    </cube-slide-item>
                </cube-slide>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name : "adv",
        props:{
            advList:Array
        },
        data(){
            return{
                imgH : process.env.VUE_APP_IMG_DOMAIN
            }
        },
        methods:{
            turn(id){
                if (!id){return}
                this.$router.push({
                    path:`/detail?id=${id}`
                })
            }
        },
        computed:{
            adv(){
                let temp = {left:[],rightTop:[],buttonLeft:[],buttonRight:[]}
                this.advList.forEach(item=>{
                    if (item.type==3){
                        temp.left.push(item)
                    }
                    if (item.type==4){
                        temp.rightTop.push(item)
                    }
                    if (item.type==5){
                        temp.buttonLeft.push(item)
                    }
                    if (item.type==6){
                        temp.buttonRight.push(item)
                    }
                })
                return temp
            }
        }
    }
</script>

<style scoped lang="stylus">
.advColumn
    margin-top 0.31rem
    padding 0 0.40rem
    display flex
    justify-content space-between
    .advLeft
        overflow hidden
        width: 135px
        height: 176.5px
        .limitAdv
            img
                width 3.61rem
                height 4.71rem
    .advRight
        display flex
        flex-direction column
        justify-content space-between
        overflow hidden
        width 205px
        .advTop
            .chooseAdv
                overflow hidden
                img
                    width 5.47rem
                    height 2.23rem
        .advBottom
            display flex
            justify-content space-between
            .advBot
                width: 100px
                img
                    width 2.67rem
                    height 2.35rem
    .posBox
        position absolute
        top 0.25rem
        left 0.27rem
        .words
            line-height 1
            .device
                font-size 0.27rem
                color #FFA6A7
            .first
                font-size 0.43rem
            .last
                margin-top 0.12rem
                font-size 0.32rem
        .goBtn
            color #fff
            margin-top 0.25rem
            width 0.80rem
            height 0.35rem
            border-radius 0.17rem
            font-size 0.27rem
            background linear-gradient(90deg,rgba(248,117,255,1) 0%,rgba(216,44,255,1) 100%)
            display flex
            justify-content center
            align-items center
    .limitAdv
        .words
            .device
                margin 0 0.13rem
            .first
                color #FF285C
                font-weight blod
            .last
                color #FF8182
    .chooseAdv
        .words
            .first
                color #AD42F3
                font-weight blod
            .last
                color #CD92F7
        .goBtn
            background linear-gradient(90deg,rgba(248,117,255,1) 0%,rgba(216,44,255,1) 100%)
    .daily
        .words
            .first
                color #427BF9
                font-weight blod
            .last
                color #427CF9
        .goBtn
            background linear-gradient(90deg,rgba(114,183,255,1) 0%,rgba(39,145,254,1) 100%)
    .pop
        .words
            .first
                color #FF6C1A
                font-weight blod
            .last
                color #FF6C1A
        .goBtn
            background linear-gradient(90deg,rgba(255,164,115,1) 0%,rgba(255,108,26,1) 100%)

</style>